<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>事件的基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
    <style>
      * {
        margin-top: 20px;
      }
      .maopao1 {
        height: 50px;
        background-color: aqua;
      }
      .box1 {
        height: 50;
        width: 50;
        background-color: rgb(211, 144, 20);
      }
      .box2 {
        height: 10;
        width: 50;
        background-color: rgb(84, 18, 207);
      }
      .ulStyle {
        height: 400;
        width: 400;
        background-color: aqua;
      }
      .liStyle {
        height: 500;
        width: 500;
        background-color: blanchedalmond;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <!--在VUE中，使用事件修饰符，修饰事件的行为，共提供了六个修饰符，前三个比较常用
        prevent: 阻止事件的默认行为
        stop: 阻止容器冒泡，从冒泡的源头组件加（内层），阻止其向上执行
        once: 控制事件只触发一次，后续不再触发
        capture: 在捕获阶段触发事件，在捕获的源头加（外层），优先执行外层的事件
        self: 指定event的目标时才触发事件，加在需要控制的元素上，除点击之外的其他元素
        passive: 事件的默认行为立即触发，不受到回调函数的影响。  但并不是所有的事件都有影响
    -->

    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <!--阻止事件的默认行为，例如a标签的跳转-->
      <a href="http://www.atguigu.com" @click.prevent="showInfo"
        >点我进入官网</a
      >
      <!--阻止事件的冒泡行为，      冒泡就是点击子组件，向上触发执行父组件的事件-->
      <div class="maopao1" @click="showInfo">
        <!--修饰符可以连续写-->
        <button class="maopao2" @click.stop="showInfo">点我测试冒泡事件</button>
      </div>
      <!--控制事件只触发一次-->
      <button @click.once="showInfo">点我测试只执行一次的功能</button>
      <!--提前使用事件的捕获模式触发事件       捕获事件是从外到内，冒泡事件是从内到外，冒泡阶段才会执行事件-->
      <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">div2</div>
      </div>
      <!--指定event的目标，才触发事件。其他例如冒泡等行为不会自动触发-->
      <div class="maopao1" @click.self="selfTest">
        <button class="maopao2" @click="selfTest">
          点我测试当前元素时才触发事件
        </button>
      </div>
      <!--事件的默认行为立即触发，无需等待事件回调执行完毕-->
      <!--滚动条有两种 scroll:滚动条的滚动(含键盘)   wheel:鼠标滚轮 -->
      <ul class="ulStyle" @wheel.passive="wheel">
        <li class="liStyle">列表1</li>
        <li class="liStyle">列表2</li>
        <li class="liStyle">列表3</li>
        <li class="liStyle">列表4</li>
      </ul>
    </div>
  </body>

  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        name: "尚硅谷",
      },
      methods: {
        //一个参数默认为event，多个的话后面为undefine
        showInfo(e) {
          alert("同学你好");
          //早期的手动实现，禁止默认的跳转
          //e.preventDefault();
        },
        showMsg(nubmer) {
          console.log(nubmer);
        },
        selfTest(e) {
          console.log(e.target);
        },
        wheel() {
          //滚动时触发复杂的业务逻辑
          console.log("@@");
        },
      },
    });
  </script>
</html>
